<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新员工(培训后)</title>
    <!--vue-->
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入组件库 -->
    <script src="/js/index.js"></script>
    <!--axios-->
    <script src="/js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="5">
            <el-select v-model="deptid" clearable placeholder="请选择部门">
                <el-option
                        v-for="item in depts"
                        :key="item.deptid"
                        :label="item.dname"
                        :value="item.deptid">
                </el-option>
            </el-select>
        </el-col>
        <el-col :span="5"><el-input v-model="ename" placeholder="请输入员工姓名"></el-input></el-col>
        <el-col :span="5"><el-button type="primary" @click="search()" icon="el-icon-search">搜索</el-button></el-col>
    </el-row>
    <el-row>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="userid"
                    label="员工编号"
                    >
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="姓名"
                    >
            </el-table-column>
            <el-table-column
                    prop="sex"
                    label="性别">
            </el-table-column>
            <el-table-column
                    prop="dname"
                    label="所属部门">
            </el-table-column>
            <el-table-column
                    prop="telephone"
                    label="联系方式"
                    >
            </el-table-column>
            <el-table-column
                    prop="idcard"
                    label="证件号码"
                    >
            </el-table-column>
            <el-table-column
                    prop="locktime"
                    label="入职时间"
                    >
            </el-table-column>
            <el-table-column
                    prop="pname"
                    label="职位"
                    >
            </el-table-column>
            <el-table-column
                    prop="gname"
                    label="所在小组"
                    >
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="toEdit(scope.row.userid)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <el-row>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[2,3,5,10,100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </el-row>



    <el-row>
        <!--模态框-->
        <el-dialog title="员工明细" :visible.sync="editFormVisible">
            <el-form :model="form">
                <el-form-item label="员工编号" :label-width="formLabelWidth">
                    <el-input v-model="form.userid" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.username" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-input v-model="form.sex" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属部门" :label-width="formLabelWidth">
                    <el-input v-model="form.dname" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" :label-width="formLabelWidth">
                    <el-input v-model="form.telephone" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="证件号码" :label-width="formLabelWidth">
                    <el-input v-model="form.idcard" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="入职时间" :label-width="formLabelWidth">
                    <el-input v-model="form.locktime" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="职位" :label-width="formLabelWidth">
                    <el-input v-model="form.pname" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所在小组" :label-width="formLabelWidth">
                    <el-input v-model="form.gname" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </el-row>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{//数据
            tableData:[],
            currentPage:1,
            pageSize:5,
            total:20,
            deptid:null,
            ename:null,
            editFormVisible:false,//更新模态框是否显示
            form:{},//添加或者更新form
            formLabelWidth:"120px",
            depts:[]//搜索部门选择框
        },
        created:function () {
            this.loadData();
        },
        methods:{//方法
            //加载数据的方法
            loadData:function () {
                //初始化数据
                axios.get('/emp/empPage', {
                    params: {
                        pageNo:this.currentPage,
                        pageSize:this.pageSize,
                        deptid:this.deptid,
                        ename:this.ename
                    }
                }).then(function (response) {
                    //赋值分页列表
                    vue.tableData = response.data.list;
                    //删除最后一页为空时，调到上一页
                    //alert(_this.tableData.length);
                    if(vue.tableData.length==0&&vue.currentPage!=1){
                        vue.currentPage=vue.currentPage-1;
                        vue.loadData();
                    }
                    //赋值总条数
                    vue.total = response.data.total;
                })
                //搜索框部门
                axios.post('/emp/depts').then(function (response) {
                    vue.depts = response.data.list;
                })
            },
            //每页数量发生变化时
            handleSizeChange:function (v) {
                vue.pageSize=v;
                vue.loadData();
            },
            //当前页数放生变化是
            handleCurrentChange:function (v) {
                vue.currentPage=v;
                vue.loadData();
            },
            // 搜索方法
            search:function () {
                vue.currentPage=1;
                vue.loadData();
            },
            //打开编辑更新模态框
            toEdit:function (userid) {
                vue.form={};
                //请求到新闻类型
                axios.post('/emp/empOne?userid='+userid).then(function (response) {
                    vue.form = response.data.list;
                })
                this.editFormVisible=true;
            }
        }
    });
</script>
</body>
</html>